<template>
  <!-- el-table
          data:数据
        el-table-column
            label:当前栏标题
            prop:对应栏的字段名
            width:宽度 设置
         自定义栏
           作用域插槽(默认插槽)
               $index:下标   row:当前行数据

 -->

  <div>
    <el-table :data="list">
      <el-table-column label="序号" type="index" width="100px" />
      <el-table-column label="日期" prop="date" width="100px" />
      <el-table-column label="姓名" prop="name" width="150px" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="操作">
        <template v-slot="{ $index, row }">
          <el-button type="text">分配权限</el-button>
          <el-button type="text">修改</el-button>
          <el-button type="text">删除</el-button>
          <div>{{ $index }}--------{{ row }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>
<style></style>
